import { isDarkTheme, toggleTheme } from '../app';

export default function Settings() {

  return (
    <div class="h-full p-6">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-xl font-medium flex items-center adonis-section-title">
          <div class="w-1 h-5 mr-3" style={{ background: 'var(--adonis-accent)' }}></div>
          设置
        </h1>
      </div>

      <div class="max-w-2xl mx-auto">
        {/* 外观设置 */}
        <div class="adonis-card p-6">
          <h2 class="text-lg font-semibold adonis-section-title mb-4 flex items-center">
            外观设置
          </h2>
          
          <div class="space-y-4">
            {/* 主题切换 */}
            <div class="flex items-center justify-between p-4 rounded-lg" style={{ background: 'rgba(255, 255, 255, 0.02)', border: '1px solid var(--adonis-border)' }}>
              <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: 'rgba(138, 180, 255, 0.1)' }}>
                  {isDarkTheme.value ? (
                    <svg className="w-6 h-6" style={{ color: 'var(--adonis-accent)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
                  ) : (
                    <svg className="w-6 h-6" style={{ color: 'var(--adonis-accent)' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                  )}
                </div>
                <div>
                  <div class="font-medium" style={{ color: 'var(--adonis-text)' }}>
                    {isDarkTheme.value ? '深色主题' : '浅色主题'}
                  </div>
                </div>
              </div>
              {/* 切换开关 */}
              <div className="relative">
                <button
                  onClick={toggleTheme}
                  className={`toggle-switch ${isDarkTheme.value ? 'active' : ''}`}
                  title={isDarkTheme.value ? '切换到浅色主题' : '切换到深色主题'}
                >
                  <span className={`toggle-switch-handle ${isDarkTheme.value ? 'active' : ''}`} />
                </button>
              </div>
            </div>

            {/* 配色方案 */}
            <div class="p-3 rounded-lg" style={{ background: 'rgba(255, 255, 255, 0.02)' }}>
              <div class="text-xs font-medium mb-2" style={{ color: 'var(--adonis-text-muted)' }}>
                配色方案
              </div>
              <div class="flex space-x-2">
                <div class="w-6 h-6 rounded border-2" style={{ 
                  background: 'var(--adonis-bg)', 
                  borderColor: 'var(--adonis-border)'
                }} title="背景色"></div>
                <div class="w-6 h-6 rounded border-2" style={{ 
                  background: 'var(--adonis-panel)', 
                  borderColor: 'var(--adonis-border)'
                }} title="面板色"></div>
                <div class="w-6 h-6 rounded border-2" style={{ 
                  background: 'var(--adonis-accent)', 
                  borderColor: 'var(--adonis-border)'
                }} title="强调色"></div>
                <div class="w-6 h-6 rounded border-2" style={{ 
                  background: 'var(--adonis-text)', 
                  borderColor: 'var(--adonis-border)'
                }} title="文字色"></div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  );
} 